<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('员工列表')" />
    <link rel="stylesheet" href="../static/css/main.css" th:href="@{/css/main.css}">
    <link rel="stylesheet" href="../static/css/rangeslider.css" th:href="@{/css/rangeslider.css}">
</head>
<br>
<section id="examples">
    <div id="js-example-change-value">
        <br>
        <input type="range" id="completion" min="0" max="100" th:value="${completion}" data-rangeslider>
        <output></output>
        <input type="hidden" id="taskId" th:value="${taskId}"/>
    </div>
</section>
<th:block th:include="include :: footer" />
<script src="../static/js/rangeslider.min.js" th:src="@{/js/rangeslider.min.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js}"></script>
<script type="text/javascript">
    function submitHandler() {
        Change();
    }

    function Change() {
        var completion = $('#completion').val();
        var taskId = $('#taskId').val();
        var formData = new FormData();
        formData.append("completion", completion);
        formData.append("taskId", taskId);
        $.ajax({
            processData: false,
            contentType: false,
            cache: false,
            type: "POST",
            url: ctx + "worker/task/change",
            data: formData,
            async: false,
            error: function (request) {
                $.modal.alertError(request);
            },
            success: function (data) {
                $.operate.successCallback(data);
            }
        });
    }
	$(function() {
		var $document   = $(document);
		var selector    = '[data-rangeslider]';
		var $inputRange = $(selector);

		// Example functionality to demonstrate a value feedback
		// and change the output's value.
		function valueOutput(element) {
			var value = element.value;
			var output = element.parentNode.getElementsByTagName('output')[0];

			output.innerHTML = value;
		}

		// Initial value output
		for (var i = $inputRange.length - 1; i >= 0; i--) {
			valueOutput($inputRange[i]);
		};

		// Update value output
		$document.on('input', selector, function(e) {
			valueOutput(e.target);
		});

		// Initialize the elements
		$inputRange.rangeslider({
			polyfill: false
		});

		// Example functionality to demonstrate programmatic value changes
		$document.on('click', '#js-example-change-value button', function(e) {
			var $inputRange = $('input[type="range"]', e.target.parentNode);
			var value = $('input[type="number"]', e.target.parentNode)[0].value;

			$inputRange
					.val(value)
					.change();
		});

		// Example functionality to demonstrate programmatic attribute changes
		$document.on('click', '#js-example-change-attributes button', function(e) {
			var $inputRange = $('input[type="range"]', e.target.parentNode);
			var attributes = {
				min: $('input[name="min"]', e.target.parentNode)[0].value,
				max: $('input[name="max"]', e.target.parentNode)[0].value,
				step: $('input[name="step"]', e.target.parentNode)[0].value
			};

			$inputRange
					.attr(attributes)
					.rangeslider('update', true);
		});

		// Example functionality to demonstrate destroy functionality
		$document
				.on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
					$('input[type="range"]', e.target.parentNode).rangeslider('destroy');
				})
				.on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
					$('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
				});
	});

</script>
</body>
</html>
